<template>
	<div class="scratchable">
		<h2>纯色刮刮乐</h2>
		<vue-scratchable
			v-if="showScratchable"
			class="scratchable-box pos"
			:brushOptions="brush"
			:hideOptions="hide1"
			getPercentageCleared
			@percentage-update="updatePoints"
		>
			<div class="wrapper">
				<div>兑奖码结果</div>
			</div>
		</vue-scratchable>
		<div v-else class="scratchable-box pos">
			<div>兑奖码：123456</div>
		</div>
		<h2>图片刮刮乐</h2>
		<vue-scratchable
			v-slot="{ init }"
			class="scratchable-box pos"
			:brushOptions="brush"
			:hideOptions="hide2"
		>
			<div class="wrapper">
				<img
					:src="require('../assets/images/guaguale.png')"
					class="scratchable-img"
					@load="init()"
				/>
			</div>
		</vue-scratchable>
	</div>
</template>

<script>
import VueScratchable from '@/components/vueScratchable.vue';
import coverImg from '@/assets/images/cover.png';
export default {
	name: 'scratchable',
	components: {
		VueScratchable,
	},
	data() {
		return {
			showScratchable: true,
			hide1: {
				type: 'color',
				value: '#dadada',
			},
			hide2: {
				type: 'pattern',
				src: coverImg,
				repeat: 'repeat',
			},
			brush: {
				size: 60, // 橡皮宽度
				shape: 'round',
			},
		};
	},
	methods: {
		updatePoints(percentage) {
			// percentage 刮过百分比
			if (percentage > 75) {
				console.log(percentage);
				this.showScratchable = false;
			}
		},
	},
};
</script>

<style scoped lang='scss'>
.scratchable {
	padding: 0 16px;
}
.scratchable-box {
	width: 200px;
	height: 50px;
}
.pos {
	width: 200px;
	margin: 0 auto;
}
.scratchable-img {
	width: 200px;
	height: 50px;
}
</style>